<template>
    <div class="container job-container">
        <system-nav name="机关党委会议"></system-nav> 
        <div class="inner mt-inner">
            <div v-if="mtList.length>0">
                <div class="tool-bar">
                    <Form class="search-bar" ref="searchForm" :model="searchForm" :label-width="75" :inline="true">
                        <FormItem label="标题："> 
                            <Input class="search-input short-input" type="text" v-model="searchForm.params" clearable 
                                @on-clear="handleSearch" @keydown.enter.native.prevent="handleSearch" placeholder="请输入关键字">
                            </Input> 
                        </FormItem>
                        <FormItem label="时间："> 
                            <DatePicker v-model="searchForm.startTime" type="date" class="short-input" @on-change="getStartTime"></DatePicker> 至
                            <DatePicker v-model="searchForm.endTime" type="date" class="short-input" @on-change="getEndTime"></DatePicker>
                        </FormItem>
                        <Button class="search-btn" type="primary" @click="handleSearch">查询</Button>
                    </Form>    
                </div>
                <div></div>
                <Table :columns="columns" :data="mtList">
                    <template slot-scope="{ row }" slot="fileName">
                        {{ row.title }}
                    </template>
                    <template slot-scope="{ row }" slot="member">
                        {{ row.memberStr }}
                    </template>
                    <template slot-scope="{ row }" slot="submitTime">
                        <span v-if="row.submitTime!=null && row.submitTime!=''">
                            {{ row.submitTime | formatDate}}
                        </span>
                    </template> 
                    <template slot-scope="{ row }" slot="action">
                        <div class="action-btns">
                            <Button type="text" size="small" @click="mtDetail(row)">查看</Button>
                            <Button v-if="row.status==1 && userId==row.sendUserId" type="text" size="small" @click="mtEdit(row)">修改</Button>
                            <Button type="text" size="small" @click="mtRemove(row)">删除</Button>
                        </div>
                    </template>
                </Table> 
                <div style="margin: 10px;overflow: hidden">
                    <div style="float: right;">
                        <Page :total="page.total" :current="page.current" :page-size="page.pageSize" :page-size-opts="pageSizeOpts"
                            show-total show-elevator show-sizer
                            @on-change="changePage" @on-page-size-change="changePageSize">
                        </Page>
                    </div>
                </div>
            </div>
            <div class="noData" v-if="mtList.length<1">
                当前组织没有录入会议！
            </div>
        </div>    
    </div>
</template>
<script>
import { meetinglist,meetingDel } from '@/common/apis/system'
import moment from 'moment'
import SystemNav from '@/components/SystemNav'

export default {
    name: 'meeting1',
    data(){
        return{
            searchForm: {
                params: '',
                startTime:'',
                endTime:''
            },
            columns: [
                {
                    title: '会议标题',
                    key: 'title',
                    className: 'table-filename' ,
                    slot: 'fileName'
                },
                {
                    title: '参加部门',
                    key: 'member',
                    className: 'table-filename' ,
                    slot: 'member'
                },
                {
                    title: '会议时间',
                    key: 'submitTime',
                    sortable: true,
                    slot: 'submitTime'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 125,
                    slot: 'action'
                }
            ],
            mtList:[],
            pageSizeOpts:[10,20,30],
            page:{
                total:0,
                current:1,
                pageSize:10,
            },
            userId:''
        }
    },
    components:{SystemNav},
    mounted(){
        let params = {
            level:1
        }
        this.getMt(params)
        this.userId = JSON.parse(localStorage.getItem('dangjianUserInfo')).userId

    },
    methods:{
        mtEdit(item){
            this.$router.push({
                path: "/addmt1",
                query: {         //参数携带方式
                id: item.id
                }
            }); 
        },
        getStartTime(val){
            this.searchForm.startTime = val;
        },
        getEndTime(val){
            this.searchForm.endTime = val;
        },
        handleSearch() {
            let params = {
                level:1,
                pageNo:1,
                pageSize:this.page.pageSize,
                params:this.searchForm.params,
                startTime:this.searchForm.startTime?moment(this.searchForm.startTime).format('YYYY-MM-DD HH:mm:ss') : '',
                endTime:this.searchForm.endTime?moment(this.searchForm.endTime).format('YYYY-MM-DD HH:mm:ss') : '',
            }
            this.getMt(params)
        },
        getMt(data){
            let params = {
                level:1,
                pageNo:data.pageNo?data.pageNo:this.page.current,
                pageSize:data.pageSize?data.pageSize:this.page.pageSize,
                params:data.params?data.params:'',
                startTime:data.startTime?data.startTime: '',
                endTime:data.endTime?data.endTime : '',
            }
            meetinglist(params).then(result =>{
                this.mtList = result.data.content.list
                this.page.total = result.data.content.total

            })
        },
        changePage(val){
            let params = {
                level:1,
                pageNo:val,
                pageSize:this.page.pageSize,
                params:this.searchForm.params,
                startTime:this.searchForm.startTime?this.searchForm.startTime : '',
                endTime:this.searchForm.endTime?this.searchForm.endTime : '',
            }
            this.getMt(params)
        },
        changePageSize(val){
            this.page.pageSize = val
            let params = { 
                level:1,
                pageNo:this.page.current,
                pageSize:val,
                params:this.searchForm.params,
                startTime:this.searchForm.startTime?this.searchForm.startTime: '',
                endTime:this.searchForm.endTime?this.searchForm.endTime : '',
            }
            this.getMt(params)
        },
        addMt(){
           this.$router.push('/addmt1')
        },
        mtDetail(row){
           this.$router.push({path: '/mtdetail', query: {id: row.id,mt:1}})
        },
        mtRemove(row){
            let _this = this
            this.$Modal.confirm({
                title: '提示',
                content: '您确定要删除此会议？',
                onOk: () => {
                    meetingDel(row.id).then(result => {
                        if (result.status === 200) {
                             _this.reset()
                        }else{
                            _this.$Message.error('删除失败');
                        }
                    })
                },
                onCancel: () => {}
            })
        },
        reset(){
            this.$Message.success('删除成功');
            this.page={
                total:0,
                current:1,
                pageSize:10,
            }
            let params = {
                level:1,
                pageNo:1
            }
            this.getMt(params)
        }
    }
}
</script>
<style lang="less" scoped>
    .noData{
        font-size: 28px;
        text-align: center;
        padding: 50px 0;
        font-weight:200;
    }
    .tool-bar .search-bar .ivu-form-item{
        margin-right: 10px;
    }
</style>